$(document).ready(function(){ // ready start
// *****  grid start  *****
// flex-direction
$('div[class="grid-1-1"]').css("border-left","3px solid red");
$('div[class="grid-2-1"]').css("border-left","3px solid red");
$('div[class="grid-3-1"]').css("border-left","3px solid red");
$('div[class="grid-4-1"]').css("border-left","3px solid red");
$("input[type='radio'][name='lineName']").change(function() {
    // $('div[id="grid"]').removeAttr("grid-template-areas")
    // window.alert($("input[type='radio'][name='flex-direction']:checked").val())
    $this = $(this);
    radio_value =  $("input[type='radio'][name='lineName']:checked").val()
    // window.alert(radio_value)
    $('div[class^="grid-"]').css("border","none");
    switch (radio_value) {
        case "column-line1":
            $('div[class="grid-1-1"]').css("border-left","3px solid red");
            $('div[class="grid-2-1"]').css("border-left","3px solid red");
            $('div[class="grid-3-1"]').css("border-left","3px solid red");
            $('div[class="grid-4-1"]').css("border-left","3px solid red");
            break;
        case "column-line2":
            $('div[class="grid-1-1"]').css("border-right","3px solid red");
            $('div[class="grid-2-1"]').css("border-right","3px solid red");
            $('div[class="grid-3-1"]').css("border-right","3px solid red");
            $('div[class="grid-4-1"]').css("border-right","3px solid red");
            break;
        case "column-line3":
            $('div[class="grid-1-3"]').css("border-left","3px solid red");
            $('div[class="grid-2-3"]').css("border-left","3px solid red");
            $('div[class="grid-3-3"]').css("border-left","3px solid red");
            $('div[class="grid-4-3"]').css("border-left","3px solid red");
            break;
        case "column-line4":
            $('div[class="grid-1-3"]').css("border-right","3px solid red");
            $('div[class="grid-2-3"]').css("border-right","3px solid red");
            $('div[class="grid-3-3"]').css("border-right","3px solid red");
            $('div[class="grid-4-3"]').css("border-right","3px solid red");
            break;
        case "row-line1":
            $('div[class="grid-1-1"]').css("border-top","3px solid red");
            $('div[class="grid-1-2"]').css("border-top","3px solid red");
            $('div[class="grid-1-3"]').css("border-top","3px solid red");
            break;
        case "row-line2":
            $('div[class="grid-1-1"]').css("border-bottom","3px solid red");
            $('div[class="grid-1-2"]').css("border-bottom","3px solid red");
            $('div[class="grid-1-3"]').css("border-bottom","3px solid red");
            break;
        case "row-line3":
            $('div[class="grid-3-1"]').css("border-top","3px solid red");
            $('div[class="grid-3-2"]').css("border-top","3px solid red");
            $('div[class="grid-3-3"]').css("border-top","3px solid red");
            break;
        case "row-line4":
            $('div[class="grid-3-1"]').css("border-bottom","3px solid red");
            $('div[class="grid-3-2"]').css("border-bottom","3px solid red");
            $('div[class="grid-3-3"]').css("border-bottom","3px solid red");
            break;
        case "row-line5":
            $('div[class="grid-4-1"]').css("border-bottom","3px solid red");
            $('div[class="grid-4-2"]').css("border-bottom","3px solid red");
            $('div[class="grid-4-3"]').css("border-bottom","3px solid red");
            break;
    }
});

$("div[class='grid-template-areas']").click(function(event) {
        // $.each( $('div[class^="grid-"]'), function( key, value ) {
        //     $(this).removeAttr('border')
        // });
        $("#areas-columns").toggle(
            function(){
                $(this).prop("checked", !$(this).prop("checked"));
            }
        );
        $("#areas-rows").toggle(
            function(){
                $(this).prop("checked", !$(this).prop("checked"));
            }
        );
        $("#areas-areas").toggle(
            function(){
                $(this).prop("checked", !$(this).prop("checked"));
            }
        );
        if ($("#areas-areas").prop('checked')){
            $('div[id="grid"]').css({
                "grid-template-columns": $("#areas-columns").val(),
                "grid-template-rows": $("#areas-rows").val(),
                "grid-template-areas":  $("#areas-areas").val()
            })
            $('div[class^="grid-1"]').css({
                'grid-area':'葡萄',
                "background-color": "yellow"
            })
    
            $('div[class="grid-2-1"], div[class="grid-3-1"]').css({
                'grid-area':'龙虾',
                "background-color": "red"
            })
            $('div[class="grid-2-2"], div[class="grid-2-3"], div[class="grid-3-2"], div[class="grid-3-3"]').css({
                'grid-area':'养鱼',
                "background-color": "green"
            })
            $('div[class^="grid-4-"]').css({
                'grid-area':'西瓜',
                "background-color": "yellow"
            })
        } else  {
            $(".grid > div").css('background-color', '#e4d6ba')
        }

        // event.stopPropagation();
        event.preventDefault();
}
);

$('input[name="gridAutoFlow"]').change(function(){
    radio_value = $('input[name="gridAutoFlow"]:checked').val();
    $('div[id="gridAutoFlow"]').css({
        "grid-auto-flow": radio_value
    })
})



$('div[class="sticky"]').draggable()
$('div[class="sticky"]').css({
    "position": 'sticky',
    'top': "0",
    'display':'block'
})
// *****  grid end  *****
}); // ready end